<!DOCTYPE html>
<html>
<head>
    <!--    vue和vuetify-->
    <script src="../plugins/vuetify/vue.js"></script>
    <script src="../plugins/vuetify/vuetify.js"></script>
    <!--    字体-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <!--    必须使用在线的-->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

    <link href="../plugins/vuetify/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
    <v-app>
        <template>
            <v-card
                    :height="height"
                    :loading="loading"
                    class="mx-auto my-12"
                    max-width="374"
            >
                <template slot="progress">
                    <v-progress-linear
                            color="deep-purple"
                            height="10"
                            indeterminate
                    ></v-progress-linear>
                </template>

                <v-img
                        height="250"
                        src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
                ></v-img>

                <v-card-title>Cafe Badilico</v-card-title>

                <v-card-text>
                    <v-row
                            align="center"
                            class="mx-0"
                    >
                        <v-rating
                                :value="4.5"
                                color="amber"
                                dense
                                half-increments
                                readonly
                                size="14"
                        ></v-rating>

                        <div class="grey--text ml-4">
                            4.5 (413)
                        </div>
                    </v-row>

                    <div class="my-4 subtitle-1">
                        $ • Italian, Cafe
                    </div>

                    <div>Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.</div>
                </v-card-text>

                <v-divider class="mx-4"></v-divider>

                <v-card-title>Tonight's availability</v-card-title>

                <v-card-text>
                    <v-chip-group
                            v-model="selection"
                            active-class="deep-purple accent-4 white--text"
                            column
                    >
                        <v-chip>5:30PM</v-chip>

                        <v-chip>7:30PM</v-chip>

                        <v-chip>8:00PM</v-chip>

                        <v-chip>9:00PM</v-chip>
                    </v-chip-group>
                </v-card-text>

                <v-card-actions>
                    <v-btn
                            color="deep-purple lighten-2"
                            text
                            @click="reserve"
                    >
                        Reserve
                    </v-btn>
                </v-card-actions>
            </v-card>
        </template>
    </v-app>
</div>


<script>
    new Vue({
        el: '#app',
        vuetify: new Vuetify(),
    })
</script>
</body>
</html>